<template>
  <i
    class="gems-icon"
    :class="{ [`gems-icon--${type}`]: type }"
    :style="customStyle"
    v-bind="$attrs"
  >
    <font-awesome-icon v-bind="filteredProps" />
  </i>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import type { IconProps } from './types'
import { omit } from 'lodash-es'

defineOptions({
  name: 'GemsIcon',
  // 禁止透射，这个name原本是给i标签用的，现在用在font-awesome的icon上，所以要禁止透射
  inheritAttrs: false
})

const props = defineProps<IconProps>()
const filteredProps = computed(() => omit(props, ['type', 'color']))
const customStyle = computed(() => {
  return props.color ? { color: props.color } : {}
})
</script>
